<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8"/>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>    
		<meta name="format-detection" content="telephone=no"/> 
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
		<style type="text/css">
			body{background-color: #000;color: #fff;font-size:62.5%;}
 			table{table-layout:fixed;color: #00CD00;}
			table th,td{word-break: keep-all;white-space:nowrap;}
			table th{font-size: 2.3rem;}
			
			#transTbody td{border-top:0;overflow: hidden;text-overflow:ellipsis;}
			#font_btn{position: absolute;right: 0}
			#font_btn button{background-color: #00CD00; border-color: #1ab394; color: #FFF;}
			
			.title{text-align:center;margin-bottom: 3rem;color: #00CD00;}
			.rem1{font-size: 1rem;}
			.rem1_5{font-size: 1.5rem;}
			.rem2{font-size: 2rem;}
			.rem2_5{font-size: 2.5rem;}
			.rem3{font-size: 3rem;}
			.rem3_5{font-size: 3.5rem;}
			.rem4{font-size: 4rem;}
		</style>
		<title>江苏杰博实-杰钱包交易实时监控</title>
	</head>
	<body>
	    <div class="wrapper">
            <div class="col-sm-12">
            	<div id="font_btn">
	           		<button type="button" class="btn" onclick="changeSize(true)">放大</button>
	           		<button type="button" class="btn" onclick="changeSize(false)">缩小</button>
            	</div>
				<div class="title">
					<h2>江苏杰博实-杰钱包交易实时监控</h2>
				</div>
				<table class="table">
					<thead>
						<tr>
	                        <th width="11%">交易时间</th>
	                        <th width="7%">业务名称</th>
	                        <th width="11%">业务参数名称</th>
	                        <th width="16%">会员编号(姓名)</th>
	                        <th width="11%">发卡机构</th>
							<th width="11%">交易卡号</th>
							<th width="9%">交易金额(元)</th>
							<th width="12%">交易结果</th>
							<th>系统流水号</th>
                       </tr>
                   </thead>
                   <tbody id="transTbody" class="rem2">
	                   <c:if test="${transList != null}">
		                   <c:forEach items="${transList}" var="trans">
			                   <tr>
				                   <td>${trans.TRANS_TIME}</td>
				                   <td>${trans.SERVICE_NAME}</td>
				                   <td>${trans.PARAM_NAME}</td>
				                   <td>${trans.CUSTOM_NAME}</td>
				                   <td>${trans.CARD_INS_NM}</td>
				                   <td>${trans.ACCT_NO}</td>
				                   <td>${trans.TRANS_AT}</td>
				                   <td>${trans.RSP_RESULT}</td>
				                   <td>${trans.LOC_TRACE_NO}</td>
			                   </tr>
		                   </c:forEach>
	                   </c:if>
                   </tbody>
               </table>
	        </div>
	    </div>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/script/websocket/sockjs-1.0.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			if("WebSocket" in window){
				websocketEvt(new WebSocket("${wsurl}"));
			}
		});
		
		/*展示交易交易情况*/
		function showTrans(data){
			/*组装展示内容*/
			var tdHtml = "<td>" + data.TRANS_TIME + "</td>";
				tdHtml += "<td>" + data.SERVICE_NAME + "</td>";
				tdHtml += "<td>" + data.PARAM_NAME + "</td>";
				tdHtml += "<td>" + data.CUSTOM_NAME + "</td>";
				tdHtml += "<td>" + data.CARD_INS_NM + "</td>";
				tdHtml += "<td>" + data.ACCT_NO + "</td>";
				tdHtml += "<td>" + data.TRANS_AT + "</td>";
				tdHtml += "<td>" + data.RSP_RESULT + "</td>";
				tdHtml += "<td>" + data.LOC_TRACE_NO + "</td>";
			/*获取已经存在的元素*/
			var tr = $("#" + data.LOC_TRACE_NO);
			if(tr.length === 0 && "XX-预下单" === data.RSP_RESULT){
				tdHtml = "<tr id='" + data.LOC_TRACE_NO + "'>" + tdHtml + "</tr>";
				$("table tbody").prepend(tdHtml);
			}else if(tr.length > 0 && "XX-预下单" !== data.RSP_RESULT){
				if(tr && tr.length > 0){
					tr.html(tdHtml);
				}
			}
			
			/*获取屏幕高度*/
			if($(document).height() > $(window).height()){
				var height = $(document).height() - $(window).height();
				var trHeight = $("table tr").height();
				var trNumber;
				if(height % trHeight === 0){
					trNumber = height/trHeight;
				}else{
					trNumber = parseInt(height/trHeight) + 1;
				}
				var trs = $("table tr");
				for(var i = trNumber;i>0;i--){
					$(trs[trs.length - i]).remove();
				}
			}
		}
		
		function changeSize(isBig){
			var className = $("#transTbody").attr("class");
			var size = className.replace("rem", "").replace("_", ".");
			if(isBig){
				size = size * 1 + 0.5;
			}else{
				size = size * 1 - 0.5;
			}
			if(size<1||size>4){
				return;
			}
			$("#transTbody").removeClass(className);
			$("#transTbody").addClass(("rem" + size).replace(".", "_"));
		}
		
		function websocketEvt(ws){
			ws.onopen = function(){}
			ws.onmessage = function(evt){
				if(evt && evt.data){
					showTrans(JSON.parse(evt.data));
				}
			}
			ws.onclose = function(evt){
				reConnection(ws);
			}
			ws.onerror = function(evt){
				reConnection(ws);
			}
		}

		/*断开之后定时重连*/
		function reConnection(ws){
			var id = setInterval(function(){
				if(1 !== ws.readyState){
					ws = new WebSocket(ws.url);
				}else{
					websocketEvt(ws);
					clearInterval(id);
				}
			}, 15000);
		}
	</script>
</html>